<template>
  <Page class="bg-[#f0f2f5] text-[#212529] leading-[1.6]">
    <!-- 头部区域 -->
    <view class="header bg-gradient-to-r from-[#4361ee] to-[#3f37c9] text-white py-[15rpx] shadow-[0_2rpx_10rpx_rgba(0,0,0,0.1)] sticky top-0 z-[100]">
      <view class="header-content flex items-center px-[15rpx]">
        <view class="back-btn w-[40rpx] h-[40rpx] flex items-center justify-center mr-[15rpx] text-[20rpx] cursor-pointer" @click="handleBack">
          <IconFont name="icon-arrow-left" />
        </view>
        <view class="header-title text-[20rpx] font-bold">发布悬赏任务</view>
      </view>
    </view>
    
    <view class="container max-w-[800rpx] mx-auto px-[15rpx]">
      <!-- 表单区域 -->
      <view class="form-container bg-white rounded-[15rpx] p-[25rpx] my-[20rpx] shadow-[0_4rpx_12rpx_rgba(0,0,0,0.05)]">
        <!-- 任务标题 -->
        <view class="form-group mb-[25rpx]">
          <view class="form-label block mb-[10rpx] font-semibold text-[16rpx] text-[#212529]">任务标题</view>
          <nut-input 
            v-model="taskForm.title"
            class="form-control w-full px-[14rpx] py-[14rpx] border border-[#e9ecef] rounded-[10rpx] text-[16rpx]"
            placeholder="例如：企业官网UI设计"
          ></nut-input>
          <view class="form-hint text-[14rpx] text-[#6c757d] mt-[8rpx]">清晰的任务标题有助于吸引合适的执行者</view>
        </view>
        
        <!-- 任务分类 -->
        <view class="form-group mb-[25rpx]">
          <view class="form-label block mb-[10rpx] font-semibold text-[16rpx] text-[#212529]">任务分类</view>
          <nut-picker 
            v-model="taskForm.category"
            :columns="categories"
            title="请选择任务分类"
            @confirm="onPickerConfirm"
            @cancel="onPickerCancel"
          >
            <nut-input 
              class="form-control w-full px-[14rpx] py-[14rpx] border border-[#e9ecef] rounded-[10rpx] text-[16rpx]"
              readonly
            ></nut-input>
          </nut-picker>
        </view>
        
        <!-- 任务描述 -->
        <view class="form-group mb-[25rpx]">
          <view class="form-label block mb-[10rpx] font-semibold text-[16rpx] text-[#212529]">任务描述</view>
          <nut-textarea 
            v-model="taskForm.description"
            class="form-control w-full px-[14rpx] py-[14rpx] border border-[#e9ecef] rounded-[10rpx] text-[16rpx]"
            placeholder="请详细描述任务需求、要求、交付标准等"
            :minHeight="120"
          ></nut-textarea>
          <view class="form-hint text-[14rpx] text-[#6c757d] mt-[8rpx]">描述越详细，执行者越能准确完成任务</view>
        </view>
        
        <!-- 任务阶段预算 -->
        <view class="form-group mb-[25rpx]">
          <view class="form-label block mb-[10rpx] font-semibold text-[16rpx] text-[#212529]">任务阶段与预算</view>
          <view class="budget-card bg-[#f8f9fa] rounded-[12rpx] p-[20rpx] mt-[10rpx]">
            <view 
              v-for="(stage, index) in stages" 
              :key="index"
              class="stage-item flex gap-[15rpx] mb-[15rpx] items-center"
              :class="{ 'mb-0': index === stages.length - 1 }"
            >
              <view class="stage-input flex-1">
                <nut-input 
                  v-model="stage.name"
                  class="form-control w-full px-[14rpx] py-[14rpx] border border-[#e9ecef] rounded-[10rpx] text-[16rpx]"
                  :placeholder="`阶段${index + 1}名称`"
                ></nut-input>
              </view>
              <view class="stage-amount w-[120rpx]">
                <nut-input 
                  v-model="stage.amount"
                  type="number"
                  class="form-control w-full px-[14rpx] py-[14rpx] border border-[#e9ecef] rounded-[10rpx] text-[16rpx]"
                  placeholder="金额"
                  @input="calculateTotal"
                ></nut-input>
              </view>
              <view 
                class="stage-action w-[40rpx] h-[40rpx] flex items-center justify-center rounded-full bg-[#e9ecef] text-[#6c757d] cursor-pointer transition-all duration-300 hover:bg-[#4361ee] hover:text-white"
                @click="removeStage(index)"
              >
                <IconFont name="icon-times" />
              </view>
            </view>
            
            <view 
              class="add-stage flex items-center justify-center p-[10rpx] text-[#4361ee] cursor-pointer font-medium mt-[10rpx]"
              @click="addStage"
            >
              <IconFont name="icon-plus-circle" class="mr-[8rpx]"></IconFont>
              <text>添加阶段</text>
            </view>
            
            <view class="total-budget flex justify-between pt-[20rpx] mt-[20rpx] border-t border-dashed border-[#e9ecef] text-[18rpx] font-bold">
              <view>总预算：</view>
              <view class="total-amount text-[#f72585]">¥{{ totalAmount.toLocaleString() }}</view>
            </view>
          </view>
          <view class="form-hint text-[14rpx] text-[#6c757d] mt-[8rpx]">任务可分1-3个阶段完成，每个阶段单独结算</view>
        </view>
        
        <!-- 截止日期 -->
        <view class="form-group mb-[25rpx]">
          <view class="form-label block mb-[10rpx] font-semibold text-[16rpx] text-[#212529]">截止日期</view>
          <nut-date-picker 
            v-model="taskForm.deadline"
            type="date"
            :minDate="new Date()"
          >
            <nut-input 
              class="form-control w-full px-[14rpx] py-[14rpx] border border-[#e9ecef] rounded-[10rpx] text-[16rpx]"
              readonly
            ></nut-input>
          </nut-date-picker>
        </view>
        
        <!-- 位置要求 -->
        <view class="form-group mb-[25rpx]">
          <view class="form-label block mb-[10rpx] font-semibold text-[16rpx] text-[#212529]">位置要求</view>
          <view class="location-options flex gap-[15rpx] mt-[10rpx]">
            <view 
              class="location-option flex-1 text-center p-[15rpx] border border-[#e9ecef] rounded-[10rpx] cursor-pointer transition-all duration-300"
              :class="{ 'active border-[#4361ee] bg-[rgba(67,97,238,0.05)]': locationType === 'remote' }"
              @click="locationType = 'remote'"
            >
              <IconFont name="icon-globe" class="text-[24rpx] mb-[10rpx]" :class="locationType === 'remote' ? 'text-[#4361ee]' : 'text-[#6c757d]'"></IconFont>
              <view class="location-name" :class="locationType === 'remote' ? 'text-[#4361ee] font-medium' : ''">远程任务</view>
            </view>
            <view 
              class="location-option flex-1 text-center p-[15rpx] border border-[#e9ecef] rounded-[10rpx] cursor-pointer transition-all duration-300"
              :class="{ 'active border-[#4361ee] bg-[rgba(67,97,238,0.05)]': locationType === 'specific' }"
              @click="locationType = 'specific'"
            >
              <IconFont name="icon-map-marker-alt" class="text-[24rpx] mb-[10rpx]" :class="locationType === 'specific' ? 'text-[#4361ee]' : 'text-[#6c757d]'"></IconFont>
              <view class="location-name" :class="locationType === 'specific' ? 'text-[#4361ee] font-medium' : ''">指定位置</view>
            </view>
          </view>
        </view>
        
        <!-- 指定位置输入 -->
        <view class="form-group mb-[25rpx]" v-if="locationType === 'specific'">
          <view class="form-label block mb-[10rpx] font-semibold text-[16rpx] text-[#212529]">任务位置</view>
          <nut-input 
            v-model="taskForm.location"
            class="form-control w-full px-[14rpx] py-[14rpx] border border-[#e9ecef] rounded-[10rpx] text-[16rpx]"
            placeholder="请输入具体位置"
          ></nut-input>
        </view>
        
        <!-- 执行者要求 -->
        <view class="form-group mb-[25rpx]">
          <view class="form-label block mb-[10rpx] font-semibold text-[16rpx] text-[#212529]">执行者要求</view>
          <view 
            v-for="(req, index) in requirements" 
            :key="index"
            class="requirement-item flex items-center mb-[15rpx]"
            :class="{ 'mb-0': index === requirements.length - 1 }"
          >
            <nut-checkbox 
              v-model="req.checked"
              class="requirement-checkbox w-[24rpx] h-[24rpx] mr-[12rpx]"
              :checked="req.checked"
            ></nut-checkbox>
            <text class="requirement-label text-[16rpx]">{{ req.label }}</text>
          </view>
        </view>
        
        <!-- 平台提示 -->
        <view class="form-group mb-[25rpx] bg-[#e6f7ff] p-[15rpx] rounded-[10rpx]">
          <view class="flex items-center">
            <IconFont name="icon-info-circle" class="text-[#1890ff] mr-[5rpx]"></IconFont>
            <text class="font-medium">平台提示</text>
          </view>
          <view class="mt-[10rpx] leading-[1.5]">
            <text>根据平台规则，发布任务需要预付全额奖励金到平台账户。</text>
            <text class="block mt-[5rpx]">任务完成后，资金将按阶段划拨给执行者。</text>
            <text class="block mt-[5rpx]">平台收取服务费：普通会员15%，SVIP会员8%。</text>
          </view>
        </view>
      </view>
      
      <!-- 发布按钮 -->
      <button 
        class="publish-btn bg-gradient-to-r from-[#4361ee] to-[#3f37c9] text-white border-none px-[16rpx] py-[16rpx] rounded-[50rpx] text-[18rpx] font-bold cursor-pointer w-full shadow-[0_5rpx_15rpx_rgba(67,97,238,0.4)] transition-transform duration-300 hover:translate-y-[-3rpx]"
        @click="handlePublish"
      >
        预付¥{{ totalAmount.toLocaleString() }}并发布任务
      </button>
    </view>
  </Page>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Taro } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { Input as nutInput, Textarea as nutTextarea, Picker as nutPicker, 
         Checkbox as nutCheckbox, DatePicker as nutDatePicker } from '@nutui/nutui-taro'

// 任务表单数据
const taskForm = ref({
  title: '',
  category: '',
  description: '',
  deadline: '',
  location: ''
})

// 任务分类选项
const categories = [
  { label: '设计类', value: 'design' },
  { label: 'IT技术', value: 'it' },
  { label: '文案写作', value: 'writing' },
  { label: '线下任务', value: 'offline' },
  { label: '营销推广', value: 'marketing' },
  { label: '其他', value: 'other' }
]

// 任务阶段
const stages = ref([
  { name: '需求分析与原型设计', amount: '600' },
  { name: 'UI视觉设计', amount: '850' },
  { name: '交付与修改', amount: '400' }
])

// 位置类型
const locationType = ref('remote')

// 执行者要求
const requirements = ref([
  { label: '必须通过实名认证', checked: true },
  { label: '需要上传相关作品证明', checked: false },
  { label: '需要相关资格证书', checked: false }
])

// 计算总预算
const totalAmount = ref(0)

const calculateTotal = () => {
  let total = 0
  stages.value.forEach(stage => {
    total += parseFloat(stage.amount) || 0
  })
  totalAmount.value = total
}

// 初始化计算
calculateTotal()

// 监听阶段变化重新计算
watch(stages, calculateTotal, { deep: true })

// 添加阶段
const addStage = () => {
  if (stages.value.length >= 3) {
    Taro.showToast({
      title: '最多只能添加3个阶段',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  stages.value.push({
    name: `阶段${stages.value.length + 1}`,
    amount: ''
  })
}

// 删除阶段
const removeStage = (index) => {
  if (stages.value.length <= 1) {
    Taro.showToast({
      title: '至少需要一个阶段',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  stages.value.splice(index, 1)
  calculateTotal()
}

// 返回按钮处理
const handleBack = () => {
  Taro.showModal({
    title: '确认离开',
    content: '确定要离开吗？您填写的内容将不会被保存',
    confirmText: '确定',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        Taro.navigateBack()
      }
    }
  })
}

// 发布任务处理
const handlePublish = () => {
  // 验证表单
  if (!taskForm.value.title) {
    Taro.showToast({
      title: '请填写任务标题',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!taskForm.value.category) {
    Taro.showToast({
      title: '请选择任务分类',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!taskForm.value.description) {
    Taro.showToast({
      title: '请填写任务描述',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!taskForm.value.deadline) {
    Taro.showToast({
      title: '请选择截止日期',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (locationType.value === 'specific' && !taskForm.value.location) {
    Taro.showToast({
      title: '请填写具体位置',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  // 验证每个阶段
  for (let i = 0; i < stages.value.length; i++) {
    if (!stages.value[i].name) {
      Taro.showToast({
        title: `请填写阶段${i + 1}名称`,
        icon: 'none',
        duration: 2000
      })
      return
    }
    
    if (!stages.value[i].amount || parseFloat(stages.value[i].amount) <= 0) {
      Taro.showToast({
        title: `请填写阶段${i + 1}金额`,
        icon: 'none',
        duration: 2000
      })
      return
    }
  }
  
  // 确认发布
  Taro.showModal({
    title: '确认发布',
    content: `您将发布一个总预算为¥${totalAmount.value.toLocaleString()}的任务，确认发布吗？`,
    confirmText: '确认发布',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        // 模拟发布过程
        Taro.showLoading({
          title: '发布中...'
        })
        
        setTimeout(() => {
          Taro.hideLoading()
          Taro.showToast({
            title: `任务发布成功！\n已冻结资金：¥${totalAmount.value.toLocaleString()}\n请等待平台审核后开始匹配执行者`,
            icon: 'none',
            duration: 3000
          })
          
          // 发布成功后跳转到任务列表
          setTimeout(() => {
            Taro.navigateBack()
          }, 3000)
        }, 1500)
      }
    }
  })
}

// 初始化日期
const initDate = () => {
  // 设置默认截止日期为7天后
  const date = new Date()
  date.setDate(date.getDate() + 7)
  taskForm.value.deadline = date
}

// 初始化
initDate()
</script>